<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div  class="common-background-color"
          v-loading="loading"
          element-loading-text="loading......"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width:98%;height:100%;margin: 6px 12px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="账户信息"  name="1">
                    <el-form ref="formInline" :model="formInline" :rules="rules" class="info-submit-form">
                        <el-row type="flex" >
                            <el-col :span="8">
                                <el-form-item label="归属机构" prop="comCode">
                                    <el-select placeholder="请选择" v-model="formInline.comCode"  @change="changeComCode">
                                        <el-option v-for="item in comList" :key="item.comCode" :label="item.comCName" :value="item.comCode"></el-option>
                                    </el-select> 
                                    <!-- <el-autocomplete
                                    popper-class="my-autocomplete"
                                    v-model="formInline.comName"
                                    :fetch-suggestions="querySearchCom"
                                    placeholder="点击查询归属机构"
                                    class="class_b"
                                    @select="handleSelectCom">
                                    >
                                    <template slot-scope="{ item }">
                                        <div>{{ item.value }}-{{ item.comCode}}</div>
                                    </template>
                                    </el-autocomplete>  -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="账户名称" prop="payeeName" >
                                    <el-input v-model="formInline.payeeName" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="证件类型" prop="identifyType"  >
                                    <el-select    placeholder="请选择" v-model="formInline.identifyType">
                                        <el-option value="" label="请选择"></el-option>
                                        <el-option
                                          v-for="item in IdentifyType"
                                          :key="item.codeCode"
                                          :label="item.codeCName"
                                          :value="item.codeCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="证件号码" prop="identifyNo"  >
                                    <el-input placeholder="请输入" v-model="formInline.identifyNo"  ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="收款银行大类" prop="bankBroad" >
                                    <el-select  v-model="formInline.bankBroad"  placeholder="请选择" @change="changeBankBroad">
                                        <el-option
                                          v-for="item in BankBigType"
                                          :key="item.directCode"
                                          :label="item.directName"
                                          :value="item.directCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="开户行省" prop="bankProvince" >
                                    <el-select  v-model="selectProvince" filterable size="small" @change="selectProvinceFun($event)" placeholder="请选择省份">
                                        <el-option value="" label="请选择省份"></el-option>
                                        <el-option :value="item" :label="item.label" v-for="(item, index) in provinceList" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="开户行市" prop="bankCity" >
                                    <el-select  v-model="selectCity" filterable  size="small" @change="selectCityFun($event)" placeholder="请选择城市">
                                        <el-option value="" label="请选择城市"></el-option>
                                        <el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="开户行县" prop="bankDistrict" >
                                    <el-select  v-model="selectDistrict" filterable  size="small" @change="selectDistrictFun($event)" placeholder="请选择区县" v-bind:disabled="isAble02">
                                        <el-option value="" label="请选择区县"></el-option>
                                        <el-option :value="item" :label="item.label" v-for="(item, index) in districtList"  :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="开户银行" prop="bankName">
                                      <el-select placeholder="请选择" v-bind:disabled="isAble" v-model="formInline.bankName"  @change="changeBankInfo" >
                                            <el-option
                                            v-for="item in bankInfoList"
                                            :key="item.bankCode"
                                            :label="item.bankName"
                                            :value="item.bankCode">
                                            </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="银行地址" prop="bankAddress" >
                                    <el-input v-model="formInline.bankAddress" placeholder="请输入"  ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="对公对私" prop="bankToPubPri" >
                                    <el-select  placeholder="请选择" v-model="formInline.bankToPubPri" >
                                        <el-option value="1" label="对公"></el-option>
                                        <el-option value="2" label="对私"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="账号" prop="bankNo" >
                                    <el-input    v-model="formInline.bankNo" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="联系电话" prop="phone"  >
                                    <el-input    v-model="formInline.phone" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>  
                    </el-form>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div>
            <template>
                <div slot="footer" style="text-align: center;height: 60px;line-height: 30px" class="dialog-footer">
                    <el-button type="primary" v-if="this.items===0" @click="save('formInline')">保 存</el-button>
                    <el-button type="primary" v-if="this.items===1" @click="handleEditUpdate('formInline')">修 改</el-button>
                    <el-button type="primary" v-if="this.items===0" @click="resetForm('formInline')">重 置</el-button>
                    <el-button type="primary" @click="closePage">关闭</el-button>
                </div>
            </template>
        </div>
        <el-dialog
          :visible.sync="Successdialog"
          :show-close="false"
          :close-on-click-modal="true"
          :close-on-press-escape="false"
          width="20%"
          center>
          <div style="margin-top: -35px;">
            <div>| 领款人提交</div>
            <hr style="width: 80%;margin-left: 1px">
          </div>
          <div v-if="this.item1===0" style="text-align: center;margin-top: 20px">
            <img src="../../assets/images/pass.png" width="60">
            <div style="margin-top: 10px">{{this.message}}</div>
          </div>
          <div v-if="this.item1===1" style="text-align: center;margin-top: 20px">
            <img src="../../assets/images/notPass.png" width="60">
            <div style="margin-top: 10px">提交失败</div>
          </div>
          <div style="margin-top: 15px;text-align: center"><span style="font-size: x-large">{{time}}</span>秒后跳转到上一个页面</div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="researchCheckSearch" type="text">关闭</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import * as api from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'accountInfoDemo',
    data() {
        return {
            rules: {
                comCode: [{ required: true, message: '必填字段', trigger: 'blur' },],    
                bankBroad: [{ required: true, message: '必填字段', trigger: 'blur' },],
                bankProvince: [{ required: true, message: '必填字段', trigger: 'blur' },],
                bankCity: [{ required: true, message: '必填字段', trigger: 'blur' },],
                bankAddress: [{ required: true, message: '必填字段', trigger: 'blur' },],
                bankToPubPri: [{ required: true, message: '必填字段', trigger: 'blur' },],
                bankNo: [{ required: true, message: '必填字段', trigger: 'blur' },],
            },
            loading:false,
            bankInfoList: [], // 银行信息
            state: '',
            timeout:  null,
            Successdialog:false,
            provinceList:[],
            cityList:[],
            districtList:[],
            selectProvince: {},
            selectCity: {},
            selectDistrict: {},
            activeNames: ['1','2'],
            formInline: {
                bankBroad:'',
                bankName:'',
                bankCode:'',
                bankProvince:'',
                bankCity:'',
                bankDistrict:'',
                bankDistrictName:'',
                bankAddress:'',
                comName:'',
                comCode:''
            },
            researchHistory:[],
            message:'',
            time:0,
            items:0,
            item1:0,
            BankBigType:[],
            IdentifyType:[],
            isAble: true,
            isAble02: true,
            bankType:'',// 银行类型编号
            comList:[],
            restaurants:[],
        }
    },
    created() {
        this.queryCompanyList(); // 机构
        this.queryBankBroadList(); // 银行大类
        this.queryIdentifyTypeList(); // 证件类型
        this.formInline=JSON.parse(this.$route.query.accountInfoDemo)
        this.items=JSON.parse(this.$route.query.items)
        if(this.items === 1){
            // 回显省市区数据
            this.selectProvince.value = this.formInline.bankProvince;
        }
        this.queryRegionList(); // 区域
    },
    methods: {
        // 查询机构列表
        queryCompanyList(){
            var  param = {
                comCode: Cookies.get("makeCom"),
            }
            api.queryAllLowerCompanysList(param).then(res =>{
                this.comList = res.data;
                // this.comList=res.data.map(item=>{
                //     return {
                //             comCode:item.comCode,
                //             value:item.comCName
                //         }
                //     })
            })
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            }
        },
        querySearchCom(queryString, cb){
            var restaurants = this.comList;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            if (results.length === 0) {
                this.formInline.comName=null;
                cb(restaurants);
            } else {
                cb(results);
            }
        },
        handleSelectCom(item){
            this.formInline.comCode = item.comCode;
        },
        // 监听机构改变
        changeComCode(val){
            this.comList.map((item)=>{
                if(item.comCode === val){
                    this.formInline.comName = item.comCName;
                }
            })
        },
        // 证件类型
        queryIdentifyTypeList(){
            var data={
                "codeType": "IdentifyType"
            }
            api.MedType(data
            ).then(res => {
                console.log("123"+res)
                this.IdentifyType=res.data
            })
        },
        // 收款银行大类
        queryBankBroadList(){
            api.queryBankClassList('').then(res=> {
                this.BankBigType = res.data
                // 如果是修改操作
                if(this.items === 1){
                    // 判断银行大类是否默认银行名称
                    this.BankBigType.map((item)=>{
                        if(item.directCode === this.formInline.bankBroad){
                            this.bankType = item.bankType;
                            if(item.isDefault === '0'){
                                this.isAble02 = false;
                                this.isAble = false;
                                this.querybankList();
                            }else{
                                this.isAble02 = true;
                                this.isAble = true;
                            }
                        }
                    })
                }
            })
        },
        // 监听银行大类改变事件
        changeBankBroad(val){
                this.bankInfoList = [];
                this.formInline.bankCode = '';
                this.formInline.bankAddress = '';
                this.selectDistrict = {};
                this.formInline.bankDistrict = '';
                this.BankBigType.map((item)=>{
                    if(item.directCode === val){
                        this.bankType = item.bankType;
                        if(item.isDefault === '0'){
                            this.isAble02 = false;
                            this.isAble = false;
                            this.querybankList();
                        }else{
                            this.isAble02 = true;
                            this.isAble = true;
                            this.formInline.bankAddress = item.bankName;
                        }
                    }
                })
        },
        // 查询银行信息
        querybankList(){
            let bankType = this.bankType;
            let areaCode = this.formInline.bankDistrict;
            if (bankType == '' || bankType == undefined || bankType == null){
                //this.$message.warning(`请选择银行大类！`);
                return;
            }
            if (areaCode == '' || areaCode == undefined || areaCode == null){
                //this.$message.warning(`请选择开户行县！`);
                return;
            }
            const param = { 
                bankType: bankType,
                areaCode: areaCode
            }
            api.queryBankInfo(param).then(res=> {
                this.bankInfoList = res.data
                if(this.bankInfoList.length > 0){
                    this.isAble = false;
                }else{
                    this.isAble = true;
                }
            })
        },
        // 监听银行信息改变事件
        changeBankInfo(val){
            this.bankInfoList.map((item)=>{
                if(item.bankCode === val){
                    this.formInline.bankName = item.bankName;
                    this.formInline.bankCode = item.bankCode;
                    this.formInline.bankAddress = item.bankName;
                }
            })
        },
        //查询区域数据
        queryRegionList(){
            api.queryBankRegionTree('').then(res=> {
                this.provinceList = res.data
                if(this.items === 1){
                    this.provinceList.map((item)=>{
                        if(item.value === this.formInline.bankProvince){
                            this.cityList = item.children
                            this.selectCity.value = this.formInline.bankCity;
                        }
                    })
                    this.cityList.map((item)=>{
                        if(item.value === this.formInline.bankCity){
                            this.districtList = item.children
                            this.selectDistrict.value = this.formInline.bankDistrict;
                        }
                    })
                }
            })
        },
        // 省份 市 县联动
        selectProvinceFun (event) {
            if (event) {
                this.cityList = event.children
            } else {
                this.cityList = []
            }
            this.districtList = []
            this.$emit('getLawyerListInfo', [event.label, 'province'])
            this.selectDistrict = {};
            if (event.value === undefined) {
                this.formInline.bankProvince = "";
            } else {
                this.formInline.bankProvince = event.value;
            }
            this.bankInfoList = [];
            this.formInline.bankCode = '';
        },
        selectCityFun (event) {
            console.log(event)
            if (event) {
                this.districtList = event.children
            } else {
                this.districtList = []
            }
            this.$emit('getLawyerListInfo', [event.label, 'city'])
            if (event.value === undefined) {
                this.formInline.bankCity = "";
            } else {
                this.formInline.bankCity = event.value;
            }
            this.bankInfoList = [];
            this.formInline.bankCode = '';
        },
        selectDistrictFun (event) {
            this.$emit('getLawyerListInfo', [event.label, 'area'])
            if (event.value === undefined) {
                this.formInline.bankDistrict = "";
                this.formInline.bankDistrictName = '';
            } else {
                this.formInline.bankDistrict = event.value;
                this.formInline.bankDistrictName = event.label;
            }
            this.bankInfoList = [];
            this.formInline.bankCode = '';
            this.formInline.bankAddress = '';
            this.querybankList();
        },
        // 保存银行信息
        save(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    api.savePrpLAccount(this.formInline
                    ).then(res => {
                    this.message=res.data.resultMsg;
                    this.Successdialog=true
                    // 把time改为5
                    this.time = 5;
                    // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                    setInterval(this.countDown, 1000);
                    }).catch((function () {
                        /*let THIS = this;*/
                        this.item1=1;
                        this.Successdialog=true;
                        // 把time改为5
                        this.time = 5;
                        // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                        setInterval(this.countDown, 1000);
                    }),
                    )
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 修改银行信息
        handleEditUpdate(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    api.updateAccountById(this.formInline
                    ).then(res => {
                    this.message=res.data.resultMsg;
                    this.Successdialog=true
                    // 把time改为5
                    this.time = 5;
                    // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                    setInterval(this.countDown, 1000);
                    }).catch((function () {
                        /*let THIS = this;*/
                        this.item1=1;
                        this.Successdialog=true;
                        // 把time改为5
                        this.time = 5;
                        // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                        setInterval(this.countDown, 1000);
                    }))
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 关闭页面
        closePage(){
            this.Successdialog=false
            this.closePageTo(this.$store,this.$route,this.$router,'accountInfo');
        },
        // 关闭页面返回上一级页面
        researchCheckSearch(){
            this.Successdialog=false
            this.closePageTo(this.$store,this.$route,this.$router,'accountInfo');
            self.close();
        },
        // 封装一个方法
        countDown() {
            let THIS = this;
            THIS.time--;
        },
    },
    mounted() {
        this.bankInfoList = this.researchHistory;
    },
    watch: {
        //   监听time的值
        time: function (newVal) {
            if (newVal === 0) {
            this.Successdialog=false    
            this.closePageTo(this.$store,this.$route,this.$router,'accountInfo');
            self.close();
            // this.Successdialog=false
            }
        },
    },
};
</script>